<template>
  <div class="content">
    <!-- <smChartTitle
      :linkToType="linkToType"
      :title="title"
      :to="to"
      :tab="tab"
      :tab-list="tabList"
      @tab-click="_tabClick"
    ></smChartTitle> -->
    <chartTitle :title="title"></chartTitle>
    <div class="rank-content">
      <table>
        <thead>
          <tr>
            <th
              :width="item.width"
              :style="{ textAlign: item.align ? item.align : 'center' }"
              v-for="(item, index) in columns"
              :key="`${id}-th-${index}`"
            >
              <a-tooltip placement="bottom">
                <template slot="title">
                  <span>{{ item.label }}</span>
                </template>
                {{ item.label }}
              </a-tooltip>
            </th>
          </tr>
        </thead>
      </table>
      <div class="table-body">
        <div class="no-data" v-show="items.length === 0">
          <a-space direction="vertical" align="center">
            <img :src="simpleImage" alt="" style="width: 3vw;" />
            <span style="color: #fff;font-size: 0.729vw">暂无数据</span>
          </a-space>
        </div>

        <scroll :scrollIntervalTime="scrollIntervalTime" @complete="handleComplete" @half="handleHalf">
          <table style="border-collapse:separate; border-spacing:0px 4px;">
            <tbody>
              <tr
                :class="{ active: activeItem === index }"
                v-for="(item, index) in partA"
                :key="`a${id}-td-${index}`"
                @click="rowClick && _itemClick(item, index)"
              >
                <template v-for="(column, count) in columns">
                  <td
                    height="30"
                    :align="column.align ? column.item : 'center'"
                    :width="column.width"
                    v-if="column.type === 'index'"
                    :key="`${id}-index-${count}`"
                  >
                    {{ item.index }}
                  </td>
                  <td
                    height="30"
                    :align="column.align ? column.item : 'center'"
                    :width="column.width"
                    v-else
                    :key="`${id}-${count}`"
                    style="padding: 0 3px;"
                  >
                    <a-tooltip placement="bottom">
                      <template slot="title">
                        <span>{{ item[column.prop] }}</span>
                      </template>
                      {{ item[column.prop] }}
                    </a-tooltip>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
          <table style="border-collapse:separate; border-spacing:0px 4px;">
            <tbody>
              <tr
                :class="{ active: activeItem === index }"
                v-for="(item, index) in partB"
                :key="`b${id}-td-${index}`"
                @click="rowClick && _itemClick(item, index)"
              >
                <template v-for="(column, count) in columns">
                  <td
                    height="30px"
                    :align="column.align ? column.item : 'center'"
                    :width="column.width"
                    v-if="column.type === 'index'"
                    :key="`${id}-index-${count}`"
                  >
                    {{ item.index }}
                  </td>
                  <td
                    height="30px"
                    :align="column.align ? column.item : 'center'"
                    :width="column.width"
                    v-else
                    :key="`${id}-${count}`"
                    style="padding: 0 3px;"
                  >
                    <a-tooltip placement="bottom">
                      <template slot="title">
                        <span>{{ item[column.prop] }}</span>
                      </template>
                      {{ item[column.prop] }}
                    </a-tooltip>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
        </scroll>
        <!-- <scroll :data="data" :class-option="classOption">
					<table style="border-collapse:separate; border-spacing:0px 4px;">
						<tbody>
							<tr :class="{active: activeItem === index}" v-for="(item, index) in data" :key="`${id}-td-${index}`" @click="rowClick && _itemClick(item, index)" >
								<template v-for="(column, count) in columns">
									<td :align="column.align ? column.item : 'center'" :width="column.width" v-if="column.type === 'index'" :key="`${id}-index-${count}`">{{_setIndex(index)}}</td>
									<td :align="column.align ? column.item : 'center'" :width="column.width" v-else :key="`${id}-${count}`" style="padding: 0 3px;">
										<a-tooltip placement="bottom">
											<template slot="title">
												<span>{{item[column.prop]}}</span>
											</template>
											{{item[column.prop]}}
										</a-tooltip>
									</td>
								</template>
							</tr>
						</tbody>
					</table>
				</scroll> -->
      </div>
    </div>
  </div>
</template>

<script>
// import smChartTitle from "../smChartTitle.vue";
import chartTitle from '../chart-title/index.vue'
import scroll from './components/auto-scroll.vue'
import imgUrl from '../../image/no-data.png'
export default {
  name: 'scroll-rank',
  components: {
    chartTitle,
    scroll
  },
  props: {
    height: {
      type: String
    },
    scrollIntervalTime: {
      type: Number,
      default: 50
    },
    title: {
      type: String
    },
    items: {
      type: Array,
      default: () => {
        return []
      }
    },
    to: {
      type: String
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    tab: {
      type: Boolean,
      default: false
    },
    linkToType: {
      type: String,
      default: ''
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      }
    },
    labelWidth: {
      type: [String, Number],
      default: '120px'
    },
    step: {
      type: Number,
      default: 1.5
    },
    rowClick: {
      type: Boolean,
      default: false
    }
  },
  beforeCreate() {
    this.simpleImage = imgUrl
  },
  computed: {
    // partA中的数据
    partA: function() {
      if (this.items.length > this.partSize) {
        return this.items
          .concat(this.items.slice(0, this.partSize))
          .slice(this.partAStartIndex, this.partAStartIndex + this.partSize)
      } else {
        return this.items
      }
    },
    // partB中的数据
    partB: function() {
      if (this.items.length > this.partSize) {
        return this.items
          .concat(this.items.slice(0, this.partSize))
          .slice(this.partBStartIndex, this.partBStartIndex + this.partSize)
      } else {
        return []
      }
    }
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true,
      activeItem: '',

      // 每个part包含的数据条数
      partSize: 40,
      // partA在items中的开始索引
      partAStartIndex: 0,
      // partB在items中的开始索引
      partBStartIndex: 0
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.partAStartIndex = 0
    this.partBStartIndex = this.partAStartIndex + this.partSize
  },

  methods: {
    // 当滚动至一半的位置时，修改partAStartIndex，计算属性partA会自动更新内容
    handleHalf() {
      this.partAStartIndex = (this.partBStartIndex + this.partSize) % this.items.length
    },
    // 当滚动归位时，修改partBStartIndex，计算属性partB会自动更新内容
    handleComplete() {
      this.partBStartIndex = (this.partAStartIndex + this.partSize) % this.items.length
    },

    _tabClick(name, index) {
      this.$emit('tab-click', name)
    },
    _itemClick(item, index) {
      if (index !== this.activeItem) {
        this.activeItem = index
        this.$emit('row-click', item)
      } else {
        this._removeActive()
      }
    },
    _removeActive() {
      this.activeItem = ''
      this.$emit('row-click', null)
    },
    _cancleActive() {
      this.activeItem = ''
    },
    _setIndex(index) {
      return index + 1 < 10 ? '0' + (index + 1) : index + 1
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  padding-bottom: 5px;
  // background-color: #009896;
  color: #fff;
  background-color: rgba(9, 23, 68, 0.5);
  border: 1px solid #1438ab;
  border-top: none;
  .rank-content {
    height: calc(100% - 0px);
    position: relative;
    margin-top: 0.226vh;
    padding-bottom: 0.926vh;
    display: flex;
    flex-flow: column;

    .table-body {
      height: calc(100% - 35px);
      overflow: hidden;
    }

    .no-data {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    table {
      width: 100%;
      table-layout: fixed;
      // height: 3vh;
      thead {
        padding-bottom: 10px;
        border-bottom: 1px solid #1438ab;
        height: 3vh;
        // background-color: rgba(13, 232, 251, 0.2);
      }

      th,
      td {
        // padding: 0.729vw 0;
        word-break: keep-all;
        white-space: nowrap;
        font-size: 0.229vw;
        color: #fff;
        box-sizing: border-box;
      }
      th {
        height: 15px;
      }
      td {
        // padding: 0.5208vw 0;
        overflow: hidden;
        text-overflow: ellipsis;
        // background-color: rgba(255, 255, 255, 0.1);
        // margin-top: 0.20833vw;
        font-size: 0.229vw;
        height: 3.85vh;
        text-align: center;
      }
    }

    .active {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
  .outer {
    table {
      tr td {
        color: #ECEEF4;
      }
      // tr:nth-child(2),:nth-child(3),:nth-child(4) {
      //   td {
      //     color: #fff;
      //   }
      // }
    }
  }
  .group {
    display: flex;
    padding: 10px;

    div {
      min-width: 9.722vh;
      padding: 0 10px;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 20px;
    }

    // .active {
    //   background-image: url(../../../../assets/daping/components/activeBtn.png);
    //   color: #000;
    //   font-weight: bold;
    // }
  }
}
</style>
